<template>
  <div ref="gantt" id="gantt_here" :style="{ width: '100%', height: height }"></div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; //引入甘特图样式
export default {
  name: 'GanttChar',
  data() {
    return {
      newObj: {},
      dataJson: [],
    };
  },
  props: {
    tasks: {
      type: Object,
      default() {
        return {
          data: [
            {"id":31, "text":"2024-191",  "progress": 0.6, "open": true},
            {"id":1, "text":"8220",  "parent":"31","progress": 0.4, "open": true},
            {"id":2, "text":"粗加工", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "color": "#F300DF","parent":"1", "progress":0.5, "open": true},
            {"id":3, "text":"内圆加工", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.6, "open": true},
            {"id":4, "text":"半精外", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.5, "open": true},
            {"id":5, "text":"外圆加工", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00","parent":"1", "progress": 0.6, "open": true},
            {"id":6, "text":"加工质检", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.6, "open": true},
            {"id":7, "text":"酸洗", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.6, "open": true},
            {"id":8, "text":"水洗", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.5, "open": true},
            {"id":9, "text":"热处理", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.5, "open": true},
            {"id":10, "text":"检验", "start_date":"2024-05-23 00:00:00", "end_date": "2024-12-30 12:00:00", "parent":"1", "progress": 0.5, "open": true},
            {"id":11, "text":"8220", "parent":"31","progress": 0.4, "open": true},
            {"id":12, "text":"粗加工", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"11", "progress":0.5, "open": true},
            {"id":13, "text":"内圆加工", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"11", "progress": 0.6, "open": true},
            {"id":14, "text":"半精外", "start_date":"2024-10-18 00:00:00", "duration":"6", "parent":"11", "progress": 0.5, "open": true},
            {"id":15, "text":"外圆加工", "start_date":"2024-10-18 00:00:00", "duration":"7", "parent":"11", "progress": 0.6, "open": true},
            {"id":16, "text":"加工质检", "start_date":"2024-10-18 00:00:00", "duration":"7", "parent":"11", "progress": 0.6, "open": true},
            {"id":17, "text":"酸洗", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"11", "progress": 0.6, "open": true},
            {"id":18, "text":"水洗", "start_date":"2024-10-18 00:00:00", "duration":"5", "parent":"11", "progress": 0.5, "open": true},
            {"id":19, "text":"热处理", "start_date":"2024-10-18 00:00:00", "duration":"4", "parent":"11", "progress": 0.5, "open": true},
            {"id":20, "text":"检验", "start_date":"2024-10-18 00:00:00", "duration":"3", "parent":"11", "progress": 0.5, "open": true},
            {"id":21, "text":"8220", "parent":"31", "progress": 0.4, "open": true},
            {"id":22, "text":"粗加工", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"21", "progress":0.5, "open": true},
            {"id":23, "text":"内圆加工", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"21", "progress": 0.6, "open": true},
            {"id":24, "text":"半精外", "start_date":"2024-10-18 00:00:00", "duration":"6", "parent":"21", "progress": 0.5, "open": true},
            {"id":25, "text":"外圆加工", "start_date":"2024-10-18 00:00:00", "duration":"7", "parent":"21", "progress": 0.6, "open": true},
            {"id":26, "text":"加工质检", "start_date":"2024-10-18 00:00:00", "duration":"7", "parent":"21", "progress": 0.6, "open": true},
            {"id":27, "text":"酸洗", "start_date":"2024-10-18 00:00:00", "duration":"8", "parent":"21", "progress": 0.6, "open": true},
            {"id":28, "text":"水洗", "start_date":"2024-10-18 00:00:00", "duration":"5", "parent":"21", "progress": 0.5, "open": true},
            {"id":29, "text":"热处理", "start_date":"2024-10-18 00:00:00", "duration":"4", "parent":"21", "progress": 0.5, "open": true},
            {"id":30, "text":"检验", "start_date":"2024-10-18 00:00:00", "duration":"3", "parent":"21", "progress": 0.5, "open": true},
          ],
          links: [
            /**
             * source 数据源
             * target 阶梯
             *        主
             *          target2
             *          target3
             *          target4
             *          target5
             *
             */
            {"id":"1","source":"2","target":"3","type":"0"},
            {"id":"2","source":"3","target":"4","type":"0"},
            {"id":"3","source":"4","target":"5","type":"0"},
            {"id":"4","source":"5","target":"6","type":"0"},
            {"id":"5","source":"6","target":"7","type":"0"},
            {"id":"6","source":"7","target":"8","type":"0"},
            {"id":"7","source":"8","target":"9","type":"0"},
            {"id":"8","source":"9","target":"10","type":"0"},
          ],
        };
      },
    },
    optType: {
      type: String,
      default() {
        return 'view';
      },
    },
    ids: {
      type: Array,
      default() {
        return [];
      },
    },
    height: {
      type: String,
      default() {
        return '800px';
      },
    }
  },
  methods: {
    // 初始化甘特图数据
    initData(tasks) {

      // 初始化甘特图配置
      this.initConfig();
      gantt.plugins({
        marker: true,
      });

      // 甘特图初始化和导入数据
      gantt.init(this.$refs.gantt);
      gantt.parse(tasks);
    },
    addTodayLine() {
      // 时间线
      var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
      var today = new Date();
      gantt.addMarker({
        start_date: today,
        css: 'today',
        text: '今天',
        title: '今天: ' + date_to_str(today),
      });
    },
    // 初始化甘特图配置
    initConfig() {
      // 1 基础配置
      // 1.1 甘特图是否只读
      if (this.optType == 'view') {
        gantt.config.readonly = true;
      } else {
        gantt.config.readonly = false;
      }

      gantt.setSkin("dark");


      // 1.2 表格列设置
      gantt.config.duration_unit = 'hour';
      gantt.config.duration_step = 8;
      gantt.config.grid_width = 320;
      gantt.config.columns = [
        { name: 'text', label: '任务名', tree: true, width: '150' },
        // { name: 'workstation', label: '班组', align: 'center', width: '*' },
        // { name: 'process', label: '工序', align: 'center', width: '*' },
        { name: 'start_date', label: '计划开始时间', align: 'center', width: '*' },
        { name: 'end_date', label: '结束时间', align: 'center', width: '*' },
      ];
      // 1.3 设置中文
      gantt.i18n.setLocale('cn');
      // 1.4 鼠标悬浮框
      gantt.plugins({ tooltip: true }); // 启用tooltip悬浮框
      gantt.templates.tooltip_text = function (start, end, task) {
        if (task.type == 'project') {
          return (
            "<b style='text-align:left;'>生产工单:</b> " +
            task.text +
            "    <span style='text-align:left;'>" +
            ' 完成比例：' +
            Math.round(task.progress * 100) +
            '% </span>'
          );
        } else {
          return (
            "<b style='text-align:left;'>生产任务:</b> " +
            task.text +
            "    <span style='text-align:left;'>" +
            ' 完成比例：' +
            Math.round(task.progress * 100) +
            '% </span>'
          );
        }
      };

      // 1.5 初始化的时候就展开树结构
      gantt.config.open_tree_initially = true;
      // 1.6 显示到任务上的文本
      gantt.templates.task_text = function (start, end, task) {
        if (task.type == 'project') {
          return (
            "<b style='text-align:left;'>生产工单:</b> " +
            task.text +
            "    <span style='text-align:left;'>" +
            ' 完成比例：' +
            Math.round(task.progress * 100) +
            '% </span>'
          );
        } else {
          return (
            "<b style='text-align:left;'>生产任务:</b> " +
            task.text +
            "    <span style='text-align:left;'>" +
            ' 完成比例：' +
            Math.round(task.progress * 100) +
            '% </span>'
          );
        }
      };
      // 1.7 显示单元格
      gantt.config.show_task_cells = true;

      // 2 时间配置
      // 2.1 时间坐标轴单位 minute/hour/day/week/quarter/month/year
      // gantt.config.scale_unit = "hour";
      // 2.2 日期格式
      // gantt.config.date_scale = "%H";
      // 2.3 时间坐标为月份的时候  先显示年份再月份
      // gantt.config.subscales = [{unit: "month", step: 1, date: "%Y,%F"}];

      var weekScaleTemplate = function (date) {
        var dateToStr = gantt.date.date_to_str('%M %d');
        var endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
        return dateToStr(date) + ' - ' + dateToStr(endDate);
      };

      var dayTemplate = function (date) {
        var dateToStr = gantt.date.date_to_str('%M %d');
        var weekDay = gantt.date.date_to_str('%D');
        return dateToStr(date);
        +'(' + weekDay(date) + ')';
      };

      var daysStyle = function (date) {
        // you can use gantt.isWorkTime(date)
        // when gantt.config.work_time config is enabled
        // In this sample it's not so we just check week days

        if (date.getDay() === 0 || date.getDay() === 6) {
          return 'weekend';
        }
        return '';
      };

      gantt.config.scales = [
        { unit: 'week', step: 1, format: weekScaleTemplate },
        { unit: 'day', step: 15, format: dayTemplate, css: daysStyle },
        // { unit: 'hour', step: 12, format: '%H:%i' }, //这里的step要根据当前的班次设置来。如果是三班倒则是8，如果是两班倒则是12。
      ];

      gantt.config.scale_height = 50;

      // 2.4 定义从后端获取或发送到后端的日期数据解析格式
      gantt.config.xml_date = '%Y-%m-%d %H:%i:%s';

      // 3 拖动配置
      // 3.1 自动调整类型,当存在子节点时自动升级为project
      gantt.config.auto_types = true;
      // 3.2 设置不可以拖动进度
      gantt.config.drag_progress = false;
      // 3.3 设置Task不可以拖动
      gantt.config.drag_move = true;
      // 3.4 设置不可以拖动关系
      gantt.config.drag_links = false;
      // 3.5 设置不可拖动Task 大小
      gantt.config.drag_resize = true;
      // 3.6 单击显示添加详情
      gantt.config.details_on_create = true;
      // 3.7 双击显示明细
      gantt.config.details_on_dblclick = true;
      // 3.8 配置级联功能
      gantt.config.cascade_project = true;
      //时间范围自动适应
      gantt.config.fit_tasks = true;

      let t = this.$props.tasks;
      let c = this.$props.ids;
      gantt.attachEvent('onAfterTaskUpdate', function (id, obj) {
        // debugger
        let tt = t.data.filter((item) => item.id == id);
        tt = obj;
        c.push(id);
      });
    },
  },
};
</script>

<style>
/* @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; */

/* 任务名前的logo */
.gantt_tree_icon.gantt_file,
.gantt_tree_icon.gantt_folder_open,
.gantt_tree_icon.gantt_folder_closed {
  width: 10px;
  background-image: none;
}

/* 任务线 */
.gantt_task_line {
  height: 16px !important;
  line-height: 16px !important;
  margin-top: 8px;
  border: none !important;
  border-radius: 8px;
}

.gantt_task_line.gantt_milestone {
  border-radius: 0;
}

/* 里程碑 */
.gantt_task_line.gantt_milestone {
  width: 12px !important;
  height: 16px !important;
  border: none !important;
  background-color: inherit !important;
  background-size: cover;
}

/* 里程碑icon */
.gantt_task_line.gantt_milestone .gantt_task_content {
  width: 12px;
  height: 16px;
  margin-left: 40px;
  transform: rotate(0deg) !important;
  /* background-image: url('../../../../assets/logo/logo.png') !important; */
  background-image: url('../../assets/logo/logo.png') !important;
}

/* 左侧悬浮单元格背景色 */
.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover {
  background-color: #2a2a2a !important;
}

/* 选中一行背景色 */
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
  background-color: #2a2a2a !important;
}

/* 选中一行每个单元格右border颜色 */
.gantt_task_row.gantt_selected .gantt_task_cell {
  border-right-color: #2a2a2a !important;
}

/* 标记线 */
.gantt_marker {
  background-color: #f4ae05;
  opacity: 0.8;
}

/*滚动条整体样式*/
.gantt-wrapper ::-webkit-scrollbar {
  width: 14px;
  /*宽分别对应竖滚动条的尺寸*/
  height: 6px;
  /*高分别对应横滚动条的尺寸*/
}

/*滚动条里面轨道*/
.gantt-wrapper ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

/*滚动条里面拖动条*/
.gantt-wrapper ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.gantt-wrapper ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

/* 展开收起背景图片 */
.gantt_tree_icon.gantt_close,
.gantt_tree_icon.gantt_open {
  background-image: none !important;
  position: relative;
}

/* 收起小三角 */
.gantt_tree_icon.gantt_close::after {
  position: absolute;
  content: '';
  top: 14px;
  left: 10px;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #999999;
}

/* 展开小三角 */
.gantt_tree_icon.gantt_open::after {
  position: absolute;
  content: '';
  top: 12px;
  left: 12px;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid #999999;
}

/* 下方滚动条宽度 */
.gantt_layout_cell .gantt_hor_scroll {
  width: calc(100% - 199px) !important;
  left: 199px;
}

.scaleStyle {
  height: 20px;
}

/* 周末背景颜色 */
.weekend {
  background: rgb(189, 185, 186) !important;
  color: #ffffff;
  width: 30s;
}
</style>
